<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'

import Nav from '../components/Nav.vue'
import ResentList from '../components/ResentList.vue'
import FriendList from '../components/FriendList.vue'
import ChatFrame from '../components/ChatFrame.vue'
import FriendView from '../components/FriendView.vue'
import FriendApplyList from '../components/FriendApplyList.vue'
import FriendSearch from '../components/FriendSearch.vue'
import { connectWebSocket } from '../utils/webSocketUtil'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ResponseP2PCall } from '../utils/P2PCall'
import receiveNewMessage from '../assets/receiveNewMessage.mp3'

const store = useStore()
const frameMode = ref(0)
const navPath = computed(() => store.getters.getNavPath)
const friendListUserId = ref(0)
const hasNewMessage = computed(() => store.getters.getNewMessageNotification)
const hasFriendNotification = computed(() => store.getters.getFriendNotification)
const userId = store.getters.getUserId
const receiveNewMsgPlayer = ref<HTMLAudioElement | null>(null)

// 获取并存储最近聊天列表
store.dispatch('GetResentMessageList', [userId])
// 获取并存储好友列表
store.dispatch('GetFriendList', [userId])
// 连接websocket
connectWebSocket(userId, store, useRouter())

// 监听nav
watch(navPath, () => (frameMode.value = 0))

window.electron.ipcRenderer.on('refuse-p2p-call', (_, args) => {
  const notify: ResponseP2PCall = args
  ElMessage.error(notify.reason)
})

window.electron.ipcRenderer.on('flush-all-p2p-data', () => {
  store.commit('FLUSH_ALL_P2P_CALL_DATA')
})

window.electron.ipcRenderer.on('flush-all-notification-data', () => {
  store.commit('FLUSH_ALL_NOTIFY_DATA')
})

window.electron.ipcRenderer.on('update-user-profile', () => {
  store.dispatch('UpdateLoginUser', store.getters.getUserId)
})

window.electron.ipcRenderer.on('handle-delete-friend-success', () => {
  frameMode.value = 0
  // 更新好友列表
  store.dispatch('GetFriendList', [userId])
})

window.electron.ipcRenderer.on('load-new-msg-audio', () => {
  if (receiveNewMsgPlayer.value) {
    receiveNewMsgPlayer.value.play()
  }
})

// Methods: 方法区
const getResentUserId = (chatUserId: number) => {
  if (store.getters.getChatUserId !== chatUserId && frameMode.value === 1) {
    window.electron.ipcRenderer.send('clear-chat-input-content')
  }
  store.commit('SET_CHAT_USER_ID', chatUserId)
  store.dispatch('GetChatNickname', chatUserId)
  store.dispatch('GetChatMessageList', [chatUserId, userId])
  frameMode.value = 1
}

const getFriendListUserId = (userId: number) => {
  friendListUserId.value = userId
  frameMode.value = 2
}

const getFriendApplyListView = () => {
  store.commit('SET_FRIEND_NOTIFICATION', false)
  frameMode.value = 3
}

const showFriendSearchView = () => (frameMode.value = 4)
</script>

<template>
  <div class="h-full grid grid-cols-3 grid-flow-col" style="grid-template-columns: 50px 200px 1fr">
    <audio ref="receiveNewMsgPlayer" class="w-0 h-0" :src="receiveNewMessage"></audio>

    <div class="h-full bg-gray-700" style="user-select: none">
      <Nav :has-new-message="hasNewMessage" :has-friend-notification="hasFriendNotification" />
    </div>

    <div class="h-full bg-gray-100" style="user-select: none">
      <ResentList v-if="navPath == 'resent'" @show-resent-msg="getResentUserId" />
      <FriendList
        v-if="navPath == 'friend'"
        :friend-apply-notification="hasFriendNotification"
        @show-friend-view="getFriendListUserId"
        @show-friend-apply-list="getFriendApplyListView"
        @show-friend-search-view="showFriendSearchView"
      />
    </div>

    <div class="h-full bg-gray-50 flex flex-col overflow-hidden" style="user-select: none">
      <opt-component />

      <div v-if="frameMode === 0" class="flex justify-center items-center h-full">
        <svg class="max-w-80 max-h-80 filter grayscale" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M217.9 356.5c-14.1 0-25.5 11.4-25.5 25.5s11.4 25.5 25.5 25.5 25.5-11.4 25.5-25.5-11.4-25.5-25.5-25.5zM217.4 433.7c-11.2 0-20.4 9.2-20.4 20.4v174.4c0 11.2 9.2 20.4 20.4 20.4s20.4-9.2 20.4-20.4V454.1c0-11.2-9.2-20.4-20.4-20.4z"
            fill="#6B400D"
          ></path>
          <path
            d="M878.7 379.5v-86c0-96.3-57.5-153.7-153.7-153.7H218c-96.3 0-153.7 57.5-153.7 153.7v320.7C64.3 710.5 121.8 768 218 768h45.8v120.4L449.9 768h11.2c17.2 11.3 39 17.5 64.6 17.5h161.6l130.7 85v-85.1h33.5c66.6 0 107.9-41.3 107.9-107.9V484.8c-0.1-56.9-30.3-95.3-80.7-105.3zM417.8 484.8v192.8c0 16.2 2.5 31 7.2 44l-106.1 70.1v-74.9h-101c-67.7-0.3-102.2-34.8-102.5-102.5V293.5c0.3-67.7 34.8-102.2 102.5-102.5H725c67.7 0.3 102.2 34.8 102.5 102.5v83.3H525.7c-66.5 0.1-107.9 41.4-107.9 108z m490.4 192.7c-0.2 38.6-18.2 56.6-56.7 56.7h-87.2v40.3l-61-40.3H525.7c-38.5-0.2-56.6-18.2-56.7-56.7V484.8c0.2-38.6 18.2-56.6 56.7-56.7h325.7c38.5 0.2 56.6 18.2 56.7 56.7v192.7z"
            fill="#6B400D"
          ></path>
          <path
            d="M851.4 428.1H525.7c-38.5 0.2-56.6 18.2-56.7 56.7v192.8c0.2 38.5 18.2 56.6 56.7 56.7h177.5l61 40.3v-40.3h87.2c38.5-0.2 56.6-18.2 56.7-56.7V484.8c-0.1-38.6-18.1-56.6-56.7-56.7zM567 627.4c-21.1 0-38.3-17.2-38.3-38.3 0-21.1 17.2-38.3 38.3-38.3 21.1 0 38.3 17.2 38.3 38.3 0 21.1-17.2 38.3-38.3 38.3z m122.2 0c-21.1 0-38.3-17.2-38.3-38.3 0-21.1 17.2-38.3 38.3-38.3 21.1 0 38.3 17.2 38.3 38.3 0 21.1-17.2 38.3-38.3 38.3z m122.3 0c-21.1 0-38.3-17.2-38.3-38.3 0-21.1 17.2-38.3 38.3-38.3 21.1 0 38.3 17.2 38.3 38.3 0 21.1-17.2 38.3-38.3 38.3z"
            fill="#FFD524"
          ></path>
          <path
            d="M567 550.8c-21.1 0-38.3 17.2-38.3 38.3 0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3 0-21.1-17.2-38.3-38.3-38.3zM689.2 550.8c-21.1 0-38.3 17.2-38.3 38.3 0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3 0-21.1-17.2-38.3-38.3-38.3zM811.5 550.8c-21.1 0-38.3 17.2-38.3 38.3 0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3 0-21.1-17.2-38.3-38.3-38.3z"
            fill="#6B400D"
          ></path>
        </svg>
      </div>

      <ChatFrame v-if="frameMode === 1" />

      <FriendView
        v-if="frameMode === 2"
        :friend-view-user-id="friendListUserId"
        @go-to-chat="getResentUserId"
      />

      <FriendApplyList v-if="frameMode === 3" />

      <FriendSearch v-if="frameMode === 4" />
    </div>
  </div>
</template>

<style scoped></style>
